<template>
  <div>
    <div class="preview-vditor">
      <div ref="khaleesi" id="khaleesi" class="vditor-preview" />
    </div>
  </div>

</template>

<script>
import VditorPreview from 'vditor/dist/method.min'
export default {
  name: 'previewVditor',
  data() {
    return {
      isLoading: true,
      activeIndex:0
    }
  },

  props: {
    pdata: {
      type: String,
      default: '# 3333'
    }
  },

  created() {
  },


  mounted() {
    this.initVditor()
    // 监听滚动事件，调用 updateActiveIndex 方法更新活动目录项。
    // this.hideVditorTextarea()
  },

  methods: {
    initVditor() {
      const options = {
        width: '100%',
        theme: 'dark',

        anchor:2,
        preview: {
          delay: 1000,
          show: true,
          markdown:{
            toc:true
          },
        },
        outline:{
          enable:true,
          position:"right"
        },
        toolbar: [
          "fullscreen",
        ],
        after:()=>{
        }
      }
      VditorPreview.mermaidRender(document)
      VditorPreview.preview(this.$refs.khaleesi,this.pdata,options)
      this.$nextTick(() => {
        this.isLoading = false
        // console.log(res)
      })
    },

  }
}
</script>

<style lang="scss">

.preview-vditor {
  width: 100%;
  height: 100%;
  word-break: break-all;
  #khaleesi {
    height: 100%;
    width: 100%;
    //min-height: 100vh;
    //text-align: left;
    padding: 30px;
    //padding: 0 10px 20px 10px;
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.1);

    @media (max-width: 768px) {
      padding: 15px;
      font-size: 14px;
    }

  }



}

</style>

